<template>
	<view>
		<image src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/top-bg.png" class="bg-color" mode="aspectFill"></image>
		<z-paging ref="paging" :refresher-enabled="false">
			<!-- 之后-vue3 -->
			<template slot="top">
				<u-navbar autoBack bgColor="rgba(0,0,0,0)" :fixed="false" title=" "></u-navbar>
			</template>
			<view class="login-title">您好,</view>
			<view class="login-desc">欢迎使用全能狮工作台</view>
			<view class="login-box">
				<view class="login-box-bgcolor"></view>
				<view class="login-data-box">
					<view class="login-item">
						<view class="login-item-title">手机号</view>
						<view class="login-item-input-box">
							<input
								maxlength="11"
								type="number"
								v-model="loginData.phone"
								placeholder-class="placeholder-class"
								placeholder="请输入手机号"
								class="login-item-input"
							/>
						</view>
					</view>
					<view class="login-item">
						<view class="login-item-title">密码</view>
						<view class="login-item-input-box">
							<input type="password" v-model="loginData.password" placeholder-class="placeholder-class" placeholder="请输入密码" class="login-item-input" />
						</view>
					</view>
					<view class="login-item">
						<view class="login-item-title">验证码</view>
						<view class="login-item-input-box" style="padding-right: 0">
							<input
								maxlength="6"
								type="digit"
								v-model="loginData.codeNum"
								placeholder-class="placeholder-class"
								placeholder="请输入验证码"
								class="login-item-input-code"
							/>
							<view @click="smsCodeClick" class="login-item-code-btn" :style="smsNum > 0 ? 'opacity: .7;' : ''">
								{{ smsNum > 0 ? smsNum + 'S后重新获取' : '获取验证码' }}
							</view>
						</view>
					</view>
				</view>
				<view class="login-btn">
					<u-button
						type="primary"
						text="登 录"
						customStyle="margin: 100rpx 55rpx 50rpx;width: 580rpx;height: 90rpx;background: #3B75FF;border-radius: 14rpx;font-weight: 500;font-size: 50rpx;color: #FFFFFF;"
						@click="submitFunc"
					></u-button>
				</view>
			</view>
		</z-paging>
		<!-- 头像昵称弹窗 -->
		<u-popup :show="userDataPopupShow" @change="" round="20">
			<view class="userData-box">
				<view class="userData-box-title">
					<image src="../../static/logo.png" class="userData-box-title-icon"></image>
					<view class="userData-box-title-text">
						全能狮
						<text class="text">申请</text>
					</view>
				</view>
				<view class="userData-box-title-desc">获取你的昵称、头像</view>
				<view class="choose-avatar flex flex-col ac jc">
					<button open-type="chooseAvatar" @chooseavatar="chooseavatar">
						<image class="avater" mode="aspectFill" :src="loginData.userImg"></image>
						<view class="userImg-text">点击选择头像</view>
					</button>
				</view>
				<view class="choose-avatar flex flex-col ac jc">
					<input class="userName-text" type="nickname" name="nickname" v-model="loginData.userName" placeholder="请输入昵称" />
				</view>
				<view class="btn-box">
					<u-button @click="cancelFunc" customStyle="width:300rpx;border:1rpx solid #f2f2f2;" type="" text="暂不选择"></u-button>
					<u-button @click="qrLoginFunc" customStyle="width:300rpx;background: #3B75FF;" type="primary" text="确 定"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			smsNum: 0,
			userDataPopupShow: false,
			loginData: {
				phone: '',
				password: '',
				codeNum: '',
				userImg: '',
				userName: ''
			}
		};
	},
	onLoad() {
		let userInfo = uni.getStorageSync('userInfo');
		console.log(userInfo, 'userInfo');
		// 如果openid不存在  请求
		if (!userInfo || userInfo.openid) {
			this.wxGetOpenId();
			return;
		}
	},
	methods: {
		onRefresh() {
			this.$refs.paging.complete();
		},
		chooseavatar(e) {
			console.log(e, '头像');
			this.loginData.userImg = e.detail.avatarUrl;
		},
		// openid
		wxGetOpenId() {
			let that = this;
			uni.showLoading({
				mask: true
			});
			uni.login({
				timeout: 5000,
				success(login) {
					that.$Api
						.wxGetOpenId({
							code: login.code,
							openid: ''
						})
						.then((res) => {
							console.log(res, 'openid');
							uni.hideLoading();
							if (res.code == 200) {
								uni.setStorageSync('userInfo', res.data);
							}
						})
						.catch((err) => {
							console.log(err);
							uni.hideLoading();
						});
				},
				fail(err) {
					console.log(err);
					uni.hideLoading();
				}
			});
		},
		// 验证码
		smsCodeClick() {
			let that = this;
			if (that.smsNum != 0) {
				uni.showToast({
					title: '请勿频繁操作',
					icon: 'error'
				});
				return;
			}
			let { phone, password, codeNum } = that.loginData;
			console.log(phone, '手机号');
			if (!uni.$u.test.mobile(phone)) {
				uni.showToast({
					title: '请输入正确手机号',
					icon: 'error'
				});
				return;
			}
			uni.showLoading({
				mask: true
			});
			that.$Api
				.wxPhoneSendSms({
					phone
				})
				.then((res) => {
					console.log(res, '获取验证码');
					uni.hideLoading();
					if (res.code == 200) {
						uni.showToast({
							title: '验证码发送成功'
						});
					}
				})
				.catch((err) => {
					uni.hideLoading();
				});
			that.smsNum = 60;
			let Interval = setInterval(() => {
				that.smsNum--;
				if (that.smsNum < 1) {
					clearInterval(Interval);
				}
			}, 1000);
		},
		// 登录
		submitFunc() {
			let that = this;
			let { phone, password, codeNum } = that.loginData;
			if (!uni.$u.test.mobile(phone)) {
				uni.showToast({
					title: '请输入正确手机号',
					icon: 'error'
				});
				return;
			}
			if (uni.$u.test.isEmpty(codeNum)) {
				uni.showToast({
					title: '请输入验证码',
					icon: 'error'
				});
				return;
			}
			if (uni.$u.test.isEmpty(password)) {
				uni.showToast({
					title: '请输入密码',
					icon: 'error'
				});
				return;
			}
			that.userDataPopupShow = true;
		},
		qrLoginFunc() {
			let that = this;
			let { phone, password, codeNum, userImg, userName } = that.loginData;
			if (!userImg) {
				uni.showToast({
					title: '请选择头像',
					icon: 'error'
				});
				return;
			}
			if (!userName) {
				uni.showToast({
					title: '请输入昵称',
					icon: 'error'
				});
				return;
			}
			uni.showLoading({
				mask: true,
				title: '头像上传中...'
			});
			that.$upload([
				{
					path: userImg
				}
			])
				.then((res) => {
					console.log(res, '文件上传');
					uni.hideLoading();
					that.wxLogin({
						phone,
						sms_code: codeNum,
						head_image: res.arrResult[0].file_url,
						nickname: userName,
						password
					});
				})
				.catch((err) => {
					uni.hideLoading();
				});
		},
		cancelFunc() {
			let { phone, password, codeNum, userImg, userName } = this.loginData;
			this.wxLogin({
				phone,
				sms_code: codeNum,
				head_image: '',
				nickname: '',
				password
			});
		},
		wxLogin(data) {
			let that = this;
			let app = getApp();
			uni.showLoading({
				mask: true,
				title: '登录中...'
			});
			let userInfo = uni.getStorageSync('userInfo');
			console.log(userInfo, 'userInfo');
			data.openid = userInfo.openid; //userInfo.openid
			that.$Api
				.wxLogin(data)
				.then(async (res) => {
					uni.hideLoading();
					console.log(res, '登录');
					if (res.code == 200) {
						res.data.openid = userInfo.openid;
						res.data.empower = 1;
						uni.setStorageSync('userInfo', res.data);
						let menu = await that.$hApi.getUserMenuList({ admin_id: res.data.id });
						let organization = await that.$Apipc.getOrganizationDetails({ id: res.data.position_id });
						console.log(menu, 'menuList');
						console.log(organization, 'organizationList');
						// 用户菜单
						if (menu.code == 200) {
							let arr = [];
							for (let i = 0; i < menu.data.length; i++) {
								if (menu.data[i].vue_path != '/configManagement') {
									arr.push(menu.data[i].vue_path);
									if (menu.data[i].nodes) {
										for (let j = 0; j < menu.data[i].nodes.length; j++) {
											arr.push(menu.data[i].nodes[j].vue_path);
											if (menu.data[i].nodes[j].nodes) {
												for (let k = 0; k < menu.data[i].nodes[j].nodes.length; k++) {
													arr.push(menu.data[i].nodes[j].nodes[k].vue_path);
												}
											}
										}
									}
								}
							}
							console.log(arr, '所有菜单path');
							app.globalData.menuList = arr;
						}
						// 字段权限
						if (organization.code == 200) {
							let field_permissions = organization.data[0].field_permissions ? JSON.parse(organization.data[0].field_permissions) : '';
							if (field_permissions) {
								console.log(field_permissions, '所有字段权限');
								app.globalData.fieldPermissions = field_permissions;
							}
						}
						uni.navigateTo({
							url: '/pages/authorize/authorize'
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						that.userDataPopupShow = false;
					}
				})
				.catch((err) => {
					console.log(err, '错误');
					uni.hideLoading();
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
					that.userDataPopupShow = false;
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.login-btn {
	::v-deep .u-button__text {
		font-size: 30rpx !important;
	}
}
.userData-box {
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;

	.userData-box-title-desc {
		margin-bottom: 30rpx;
		font-size: 34rpx;
		font-weight: bold;
	}

	.userData-box-title {
		display: flex;
		align-items: center;
		width: 100%;

		.userData-box-title-icon {
			width: 100rpx;
			height: 100rpx;
			margin-right: 30rpx;
		}

		.userData-box-title-text {
			font-size: 28rpx;
			font-weight: bold;

			.text {
				font-size: 24rpx;
				margin-left: 20rpx;
				font-weight: normal;
			}
		}
	}

	.choose-avatar {
		width: 100%;
		border-bottom: 1rpx solid #f2f2f2;
		padding: 10rpx 0;
		box-sizing: border-box;

		.userName-text {
			width: 100%;
			height: 100rpx;
			text-align: center;
		}

		button {
			border: none;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: rgba(0, 0, 0, 0);

			.userImg-text {
				font-size: 24rpx;
				text-align: center;
			}

			&::after {
				border: none;
			}

			.avater {
				width: 130rpx;
				height: 130rpx;
				border-radius: 30rpx;
				background-color: #f2f2f2;
			}
		}
	}

	.btn-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20rpx;
	}
}

.bg-color {
	width: 100%;
	height: 708rpx;
	position: fixed;
	z-index: -1;
}

.login-title {
	font-weight: 500;
	font-size: 50rpx;
	color: #000000;
	align-items: baseline;
	margin: 54rpx 0 0 58rpx;
}
.login-desc {
	font-weight: 500;
	font-size: 50rpx;
	color: #000000;
	margin: 10rpx 0 26rpx 58rpx;
}

.login-box {
	// background-color: #fff;
	width: 690rpx;
	margin: 60rpx 30rpx 0;
	border-top-left-radius: 50rpx;
	border-top-right-radius: 50rpx;
	position: relative;
	overflow: hidden;

	.login-box-bgcolor {
		// background-color: #f5f8ff;
		width: 100%;
		height: 200rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.login-box-bg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;

		.img {
			width: 100%;
		}
	}

	.tab-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 1;

		.tab-item {
			flex: 1;
			text-align: center;
			font-weight: 500;
			margin: 34rpx 0;
			font-size: 32rpx;
			color: #000000;
			position: relative;

			&::after {
				transition: all 0.2s;
				content: '';
				position: absolute;
				bottom: -36rpx;
				left: 50%;
				transform: translate(-50%, 0);
				width: 36rpx;
				height: 8rpx;
				background: rgba(0, 0, 0, 0);
				border-radius: 2rpx;
			}
		}

		.tab-item-active {
			position: relative;

			&::after {
				content: '';
				position: absolute;
				bottom: -36rpx;
				left: 50%;
				transform: translate(-50%, 0);
				width: 36rpx;
				height: 8rpx;
				background: #3b75ff;
				border-radius: 2rpx;
			}
		}
	}

	.login-data-box {
		width: 100%;
		padding: 50rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		background-color: #ffffff;

		.login-item {
			width: 590rpx;
			margin-bottom: 48rpx;

			.login-item-title {
				font-weight: 500;
				font-size: 32rpx;
				color: #464646;
				margin-bottom: 24rpx;
			}

			.login-item-input-box {
				width: 100%;
				background: #f5f8ff;
				border-radius: 8rpx;
				height: 96rpx;
				padding: 28rpx 36rpx;
				box-sizing: border-box;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.login-item-input {
					width: 100%;
					height: 100%;
					font-size: 28rpx;
				}

				.placeholder-class {
					font-weight: 400;
					font-size: 28rpx;
					color: #000;
				}

				.login-item-input-code {
					width: 300rpx;
					font-size: 28rpx;
					border-right: 1rpx solid #d3d7db;
				}

				.login-item-code-btn {
					width: 240rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #3b75ff;
					text-align: center;
				}
			}
		}
	}
}
</style>
